<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆豆女王的菜单</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-100: #FF4081;
            --primary-200: #ff79b0;
            --primary-300: #ffe4ff;
            --accent-100: #00E5FF;
            --accent-200: #00829b;
            --text-100: #333333;
            --text-200: #5c5c5c;
            --bg-100: #F5F5F5;
            --bg-200: #ebebeb;
            --bg-300: #c2c2c2;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
            color: var(--text-100);
            line-height: 1.6;
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }

        /* 背景装饰 */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="%23FF4081" stroke-width="0.5" opacity="0.1"/><circle cx="20" cy="20" r="10" fill="none" stroke="%2300E5FF" stroke-width="0.5" opacity="0.1"/><circle cx="80" cy="80" r="15" fill="none" stroke="%23FF4081" stroke-width="0.5" opacity="0.1"/></svg>') repeat;
            background-size: 200px 200px;
            z-index: -1;
            opacity: 0.3;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            color: var(--text-100);
            padding: 20px 0;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary-100);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo i {
            font-size: 28px;
            background: linear-gradient(45deg, var(--primary-100), var(--primary-200));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .nav-tabs {
            display: flex;
            gap: 10px;
        }

        .nav-tab {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            color: var(--text-100);
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 20px;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .nav-tab:hover {
            background: rgba(255, 255, 255, 0.4);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(31, 38, 135, 0.2);
        }

        .nav-tab.active {
            background: linear-gradient(45deg, var(--primary-100), var(--primary-200));
            color: white;
            box-shadow: 0 4px 15px rgba(255, 64, 129, 0.3);
        }

        .tab-content {
            display: none;
            animation: fadeIn 0.5s;
        }

        .tab-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .section-title {
            margin: 30px 0 20px;
            color: var(--text-100);
            font-size: 28px;
            font-weight: 600;
            position: relative;
            padding-bottom: 15px;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-100), var(--primary-200));
            border-radius: 2px;
        }

        .btn {
            background: linear-gradient(45deg, var(--primary-100), var(--primary-200));
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
            font-weight: 500;
            box-shadow: 0 4px 15px rgba(255, 64, 129, 0.2);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 64, 129, 0.3);
        }

        .btn-success {
            background: linear-gradient(45deg, #2ecc71, #27ae60);
            box-shadow: 0 4px 15px rgba(46, 204, 113, 0.2);
        }

        .btn-success:hover {
            box-shadow: 0 6px 20px rgba(46, 204, 113, 0.3);
        }

        .btn-danger {
            background: linear-gradient(45deg, #e74c3c, #c0392b);
            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.2);
        }

        .btn-danger:hover {
            box-shadow: 0 6px 20px rgba(231, 76, 60, 0.3);
        }

        .btn-secondary {
            background: linear-gradient(45deg, #95a5a6, #7f8c8d);
            box-shadow: 0 4px 15px rgba(149, 165, 166, 0.2);
        }

        .btn-secondary:hover {
            box-shadow: 0 6px 20px rgba(149, 165, 166, 0.3);
        }

        .menu-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }

        .menu-item {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
            transition: all 0.3s ease;
            position: relative;
        }

        .menu-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
            z-index: 0;
        }

        .menu-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(31, 38, 135, 0.2);
        }

        .menu-item-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .menu-item:hover .menu-item-image {
            transform: scale(1.05);
        }

        .menu-item-content {
            padding: 20px;
            position: relative;
            z-index: 1;
        }

        .menu-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .menu-item-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--text-100);
        }

        .menu-item-category {
            background: linear-gradient(45deg, var(--primary-100), var(--primary-200));
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(255, 64, 129, 0.2);
        }

        .menu-item-description {
            color: var(--text-200);
            margin-bottom: 20px;
            font-size: 14px;
            line-height: 1.5;
        }

        .menu-item-actions {
            display: flex;
            justify-content: space-between;
        }

        .quantity-control {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(5px);
            border-radius: 25px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .quantity-btn {
            width: 32px;
            height: 32px;
            border: none;
            background: linear-gradient(45deg, var(--primary-100), var(--primary-200));
            color: white;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .quantity-btn:hover {
            background: linear-gradient(45deg, var(--primary-200), var(--primary-100));
        }

        .quantity {
            width: 40px;
            text-align: center;
            font-weight: 600;
            color: var(--text-100);
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0;
            border-radius: 20px;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 15px 35px rgba(31, 38, 135, 0.2);
            position: relative;
        }

        .modal-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
            z-index: 0;
            pointer-events: none;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px;
            background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
            color: white;
            position: relative;
            z-index: 1;
        }

        .modal-title {
            font-size: 20px;
            font-weight: bold;
            color: white;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.8);
        }

        .close-btn:hover {
            color: white;
        }

        .modal-body {
            padding: 25px;
            position: relative;
            z-index: 1;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--text-100);
            font-size: 15px;
        }

        .form-control {
            width: 100%;
            padding: 15px;
            border: none;
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            font-size: 15px;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        .form-control:focus {
            outline: none;
            background: rgba(255, 255, 255, 0.7);
            border-color: var(--primary-100);
            box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.1);
        }

        textarea.form-control {
            resize: vertical;
            min-height: 100px;
        }

        .image-upload {
            margin-bottom: 15px;
        }

        .image-preview {
            width: 100%;
            max-height: 200px;
            object-fit: contain;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-top: 10px;
        }

        .cart-summary {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 20px;
            padding: 25px;
            margin-top: 20px;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
        }

        .cart-item {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
            transition: all 0.3s ease;
        }

        .cart-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(31, 38, 135, 0.2);
        }

        .cart-item-info {
            flex: 1;
        }

        .cart-item-name {
            font-weight: 600;
            font-size: 18px;
            color: var(--text-100);
            margin-bottom: 5px;
        }

        .cart-item-quantity {
            color: var(--text-200);
            font-size: 14px;
        }

        .cart-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: #7f8c8d;
        }

        .empty-state i {
            font-size: 48px;
            margin-bottom: 15px;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 25px;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            color: var(--text-100);
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
            z-index: 2000;
            transform: translateX(150%);
            transition: transform 0.3s ease;
        }

        .notification.show {
            transform: translateX(0);
        }

        .notification.success {
            background: linear-gradient(135deg, rgba(46, 204, 113, 0.9), rgba(39, 174, 96, 0.9));
            color: white;
        }

        .notification.error {
            background: linear-gradient(135deg, rgba(231, 76, 60, 0.9), rgba(192, 57, 43, 0.9));
            color: white;
        }

        .management-actions {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .management-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }

        .management-item {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
            transition: all 0.3s ease;
            position: relative;
        }

        .management-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
            z-index: 0;
        }

        .management-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(31, 38, 135, 0.2);
        }

        .management-item-content {
            padding: 20px;
            position: relative;
            z-index: 1;
        }

        .management-item-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .btn-small {
            padding: 8px 15px;
            font-size: 14px;
            border-radius: 20px;
        }

        .filter-container {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .filter-btn {
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 25px;
            color: var(--text-100);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            font-weight: 500;
        }

        .filter-btn:hover {
            background: rgba(255, 255, 255, 0.4);
        }

        .filter-btn.active {
            background: linear-gradient(45deg, var(--primary-100), var(--primary-200));
            color: white;
            box-shadow: 0 4px 15px rgba(255, 64, 129, 0.2);
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-200);
        }

        .empty-state i {
            font-size: 64px;
            margin-bottom: 20px;
            color: var(--bg-300);
            opacity: 0.5;
        }

        .empty-state h3 {
            font-size: 22px;
            margin-bottom: 10px;
            color: var(--text-100);
        }

        .empty-state p {
            font-size: 16px;
            margin-bottom: 25px;
        }

        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }

            .header-content {
                flex-direction: column;
                gap: 15px;
            }

            .nav-tabs {
                overflow-x: auto;
                justify-content: flex-start;
            }

            .menu-grid, .management-grid {
                grid-template-columns: 1fr;
            }

            .cart-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .cart-item-actions {
                width: 100%;
                justify-content: space-between;
            }

            .modal-content {
                width: 95%;
                margin: 20px auto;
            }

            .management-actions {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="header-content">
            <div class="logo">
                <i class="fas fa-utensils"></i> 豆豆女王的菜单
            </div>
            <div class="nav-tabs">
                <button class="nav-tab active" data-tab="menu">菜单浏览</button>
                <button class="nav-tab" data-tab="cart">购物车</button>
                <button class="nav-tab" data-tab="management">菜单管理</button>
            </div>
        </div>
    </header>

    <div class="container">
        <!-- 菜单浏览标签页 -->
        <div id="menu" class="tab-content active">
            <h2 class="section-title">菜单浏览</h2>
            
            <div class="filter-container">
                <button class="filter-btn active" data-filter="all">全部</button>
                <button class="filter-btn" data-filter="热菜">热菜</button>
                <button class="filter-btn" data-filter="凉菜">凉菜</button>
                <button class="filter-btn" data-filter="汤羹">汤羹</button>
                <button class="filter-btn" data-filter="主食">主食</button>
                <button class="filter-btn" data-filter="饮品">饮品</button>
                <button class="filter-btn" data-filter="甜点">甜点</button>
            </div>

            <div id="menu-grid" class="menu-grid">
                <!-- 菜单项将通过JavaScript动态生成 -->
            </div>

            <div id="empty-menu" class="empty-state" style="display: none;">
                <i class="fas fa-utensils"></i>
                <h3>暂无菜品</h3>
                <p>暂无菜品，请先在菜单管理中添加菜品</p>
            </div>
        </div>

        <!-- 购物车标签页 -->
        <div id="cart" class="tab-content">
            <h2 class="section-title">购物车</h2>
            
            <div id="cart-items">
                <!-- 购物车项目将通过JavaScript动态生成 -->
            </div>

            <div id="empty-cart" class="empty-state" style="display: none;">
                <i class="fas fa-shopping-cart"></i>
                <h3>购物车是空的</h3>
                <p>购物车是空的，快去选择美食吧！</p>
            </div>

            <div id="cart-summary" class="cart-summary" style="display: none;">
                <div class="cart-actions">
                    <button id="clear-cart" class="btn btn-danger">清空购物车</button>
                    <button id="generate-menu" class="btn btn-success">生成菜单图片</button>
                </div>
            </div>
        </div>

        <!-- 菜单管理标签页 -->
        <div id="management" class="tab-content">
            <h2 class="section-title">菜单管理</h2>
            
            <div class="management-actions">
                <button id="add-dish" class="btn btn-success">
                    <i class="fas fa-plus"></i> 添加新菜品
                </button>
            </div>

            <div id="management-grid" class="menu-grid">
                <!-- 管理模式下的菜品将通过JavaScript动态生成 -->
            </div>

            <div id="empty-management" class="empty-state" style="display: none;">
                <i class="fas fa-utensils"></i>
                <h3>暂无菜品</h3>
                <p>暂无菜品，点击上方按钮添加新菜品</p>
            </div>
        </div>
    </div>

    <!-- 添加/编辑菜品模态框 -->
    <div id="dish-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title">添加新菜品</h3>
                <button class="close-btn" id="close-modal">&times;</button>
            </div>
            <form id="dish-form">
                <div class="form-group">
                    <label class="form-label">菜品名称 <span style="color: red;">*</span></label>
                    <input type="text" class="form-control" id="dish-name" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label">菜品分类 <span style="color: red;">*</span></label>
                    <select class="form-control" id="dish-category" required>
                        <option value="">请选择分类</option>
                        <option value="热菜">热菜</option>
                        <option value="凉菜">凉菜</option>
                        <option value="汤羹">汤羹</option>
                        <option value="主食">主食</option>
                        <option value="饮品">饮品</option>
                        <option value="甜点">甜点</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label class="form-label">菜品描述 <span style="color: red;">*</span></label>
                    <textarea class="form-control" id="dish-description" required></textarea>
                </div>
                
                <div class="form-group">
                    <label class="form-label">制作方法</label>
                    <textarea class="form-control" id="dish-cooking-method"></textarea>
                </div>
                
                <div class="form-group image-upload">
                    <label class="form-label">菜品图片</label>
                    <input type="file" class="form-control" id="dish-image" accept="image/*">
                    <img id="image-preview" class="image-preview" style="display: none;">
                </div>
                
                <div class="form-group">
                    <button type="submit" class="btn btn-success">保存菜品</button>
                    <button type="button" class="btn btn-secondary" id="cancel-form">取消</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 通知提示 -->
    <div id="notification" class="notification"></div>

    <script>
        // 应用状态管理
        const AppState = {
            dishes: [],
            cart: [],
            currentFilter: 'all',
            editingDishId: null,
            activeTab: 'menu'
        };

        // 初始化应用
        document.addEventListener('DOMContentLoaded', function() {
            loadDataFromStorage();
            setupEventListeners();
            renderMenu();
            renderCart();
            renderManagement();
        });

        // 从localStorage加载数据
        function loadDataFromStorage() {
            const savedDishes = localStorage.getItem('dishes');
            const savedCart = localStorage.getItem('cart');
            
            if (savedDishes) {
                AppState.dishes = JSON.parse(savedDishes);
            } else {
                // 初始化一些示例数据
                AppState.dishes = [
                    {
                        id: generateId(),
                        name: '宫保鸡丁',
                        category: '热菜',
                        description: '经典川菜，鸡肉嫩滑，花生香脆，口感丰富',
                        cookingMethod: '鸡肉切丁，用料酒、生抽腌制；干辣椒切段；葱姜蒜切末；热锅凉油，下花椒、干辣椒爆香；加入鸡丁炒至变色；加入葱姜蒜炒香；调入糖醋汁；加入花生米翻炒均匀即可',
                        image: 'https://picsum.photos/seed/dish1/400/300.jpg'
                    },
                    {
                        id: generateId(),
                        name: '凉拌黄瓜',
                        category: '凉菜',
                        description: '清爽开胃，酸甜可口，夏日必备',
                        cookingMethod: '黄瓜洗净拍碎切段；加入蒜末、生抽、醋、糖、盐、香油拌匀即可',
                        image: 'https://picsum.photos/seed/dish2/400/300.jpg'
                    },
                    {
                        id: generateId(),
                        name: '西红柿鸡蛋汤',
                        category: '汤羹',
                        description: '家常汤品，营养丰富，酸甜可口',
                        cookingMethod: '西红柿切块；鸡蛋打散；热锅凉油，下西红柿炒出汁水；加水烧开；淋入鸡蛋液；调味后撒上葱花即可',
                        image: 'https://picsum.photos/seed/dish3/400/300.jpg'
                    }
                ];
                saveDataToStorage();
            }
            
            if (savedCart) {
                AppState.cart = JSON.parse(savedCart);
            }
        }

        // 保存数据到localStorage
        function saveDataToStorage() {
            localStorage.setItem('dishes', JSON.stringify(AppState.dishes));
            localStorage.setItem('cart', JSON.stringify(AppState.cart));
        }

        // 设置事件监听器
        function setupEventListeners() {
            // 标签页切换
            document.querySelectorAll('.nav-tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    switchTab(this.dataset.tab);
                });
            });

            // 筛选按钮
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    filterDishes(this.dataset.filter);
                });
            });

            // 添加菜品按钮
            document.getElementById('add-dish').addEventListener('click', function() {
                openDishModal();
            });

            // 模态框相关
            document.getElementById('close-modal').addEventListener('click', closeDishModal);
            document.getElementById('cancel-form').addEventListener('click', closeDishModal);
            
            // 表单提交
            document.getElementById('dish-form').addEventListener('submit', function(e) {
                e.preventDefault();
                saveDish();
            });

            // 图片预览
            document.getElementById('dish-image').addEventListener('change', function(e) {
                previewImage(e.target.files[0]);
            });

            // 清空购物车
            document.getElementById('clear-cart').addEventListener('click', function() {
                if (confirm('确定要清空购物车吗？')) {
                    AppState.cart = [];
                    saveDataToStorage();
                    renderCart();
                    showNotification('购物车已清空');
                }
            });

            // 生成菜单图片
            document.getElementById('generate-menu').addEventListener('click', generateMenuImage);
        }

        // 切换标签页
        function switchTab(tabName) {
            // 更新标签按钮状态
            document.querySelectorAll('.nav-tab').forEach(tab => {
                tab.classList.remove('active');
                if (tab.dataset.tab === tabName) {
                    tab.classList.add('active');
                }
            });

            // 更新标签内容显示
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            document.getElementById(tabName).classList.add('active');

            AppState.activeTab = tabName;
        }

        // 筛选菜品
        function filterDishes(category) {
            AppState.currentFilter = category;
            
            // 更新筛选按钮状态
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
                if (btn.dataset.filter === category) {
                    btn.classList.add('active');
                }
            });

            renderMenu();
        }

        // 渲染菜单
        function renderMenu() {
            const menuGrid = document.getElementById('menu-grid');
            const emptyState = document.getElementById('empty-menu');
            
            // 筛选菜品
            let filteredDishes = AppState.dishes;
            if (AppState.currentFilter !== 'all') {
                filteredDishes = AppState.dishes.filter(dish => dish.category === AppState.currentFilter);
            }

            if (filteredDishes.length === 0) {
                menuGrid.style.display = 'none';
                emptyState.style.display = 'block';
                return;
            }

            menuGrid.style.display = 'grid';
            emptyState.style.display = 'none';

            menuGrid.innerHTML = filteredDishes.map(dish => {
                const quantity = getCartItemQuantity(dish.id);
                return `
                    <div class="menu-item">
                        <img src="${dish.image}" alt="${dish.name}" class="menu-item-image">
                        <div class="menu-item-content">
                            <div class="menu-item-header">
                                <h3 class="menu-item-title">${dish.name}</h3>
                                <span class="menu-item-category">${dish.category}</span>
                            </div>
                            <p class="menu-item-description">${dish.description}</p>
                            <div class="menu-item-actions">
                                <div class="quantity-control">
                                    <button class="quantity-btn" onclick="decreaseQuantity('${dish.id}')">
                                        <i class="fas fa-minus"></i>
                                    </button>
                                    <span class="quantity">${quantity}</span>
                                    <button class="quantity-btn" onclick="increaseQuantity('${dish.id}')">
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            }).join('');
        }

        // 渲染购物车
        function renderCart() {
            const cartItems = document.getElementById('cart-items');
            const emptyState = document.getElementById('empty-cart');
            const cartSummary = document.getElementById('cart-summary');

            if (AppState.cart.length === 0) {
                cartItems.innerHTML = '';
                emptyState.style.display = 'block';
                cartSummary.style.display = 'none';
                return;
            }

            emptyState.style.display = 'none';
            cartSummary.style.display = 'block';

            cartItems.innerHTML = AppState.cart.map(item => {
                const dish = AppState.dishes.find(d => d.id === item.id);
                if (!dish) return '';

                return `
                    <div class="cart-item">
                        <div class="cart-item-info">
                            <div class="cart-item-name">${dish.name}</div>
                            <div class="cart-item-quantity">数量: ${item.quantity}</div>
                        </div>
                        <div class="quantity-control">
                            <button class="quantity-btn" onclick="decreaseQuantity('${dish.id}')">
                                <i class="fas fa-minus"></i>
                            </button>
                            <span class="quantity">${item.quantity}</span>
                            <button class="quantity-btn" onclick="increaseQuantity('${dish.id}')">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                    </div>
                `;
            }).join('');
        }

        // 渲染管理页面
        function renderManagement() {
            const managementGrid = document.getElementById('management-grid');
            const emptyState = document.getElementById('empty-management');

            if (AppState.dishes.length === 0) {
                managementGrid.style.display = 'none';
                emptyState.style.display = 'block';
                return;
            }

            managementGrid.style.display = 'grid';
            emptyState.style.display = 'none';

            managementGrid.innerHTML = AppState.dishes.map(dish => `
                <div class="menu-item">
                    <img src="${dish.image}" alt="${dish.name}" class="menu-item-image">
                    <div class="menu-item-content">
                        <div class="menu-item-header">
                            <h3 class="menu-item-title">${dish.name}</h3>
                            <span class="menu-item-category">${dish.category}</span>
                        </div>
                        <p class="menu-item-description">${dish.description}</p>
                        <div class="menu-item-actions">
                            <button class="btn btn-secondary" onclick="editDish('${dish.id}')">
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                            <button class="btn btn-danger" onclick="deleteDish('${dish.id}')">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        // 获取购物车中商品数量
        function getCartItemQuantity(dishId) {
            const cartItem = AppState.cart.find(item => item.id === dishId);
            return cartItem ? cartItem.quantity : 0;
        }

        // 增加商品数量
        function increaseQuantity(dishId) {
            const existingItem = AppState.cart.find(item => item.id === dishId);
            
            if (existingItem) {
                existingItem.quantity++;
            } else {
                AppState.cart.push({ id: dishId, quantity: 1 });
            }
            
            saveDataToStorage();
            renderCart();
            renderMenu();
        }

        // 减少商品数量
        function decreaseQuantity(dishId) {
            const existingItem = AppState.cart.find(item => item.id === dishId);
            
            if (existingItem) {
                existingItem.quantity--;
                
                if (existingItem.quantity <= 0) {
                    AppState.cart = AppState.cart.filter(item => item.id !== dishId);
                }
                
                saveDataToStorage();
                renderCart();
                renderMenu();
            }
        }

        // 打开菜品模态框
        function openDishModal(dishId = null) {
            const modal = document.getElementById('dish-modal');
            const modalTitle = document.getElementById('modal-title');
            const form = document.getElementById('dish-form');
            
            // 重置表单
            form.reset();
            document.getElementById('image-preview').style.display = 'none';
            
            if (dishId) {
                // 编辑模式
                const dish = AppState.dishes.find(d => d.id === dishId);
                if (!dish) return;
                
                modalTitle.textContent = '编辑菜品';
                document.getElementById('dish-name').value = dish.name;
                document.getElementById('dish-category').value = dish.category;
                document.getElementById('dish-description').value = dish.description;
                document.getElementById('dish-cooking-method').value = dish.cookingMethod || '';
                
                if (dish.image) {
                    document.getElementById('image-preview').src = dish.image;
                    document.getElementById('image-preview').style.display = 'block';
                }
                
                AppState.editingDishId = dishId;
            } else {
                // 添加模式
                modalTitle.textContent = '添加新菜品';
                AppState.editingDishId = null;
            }
            
            modal.classList.add('active');
        }

        // 关闭菜品模态框
        function closeDishModal() {
            const modal = document.getElementById('dish-modal');
            modal.classList.remove('active');
            AppState.editingDishId = null;
        }

        // 保存菜品
        function saveDish() {
            const name = document.getElementById('dish-name').value.trim();
            const category = document.getElementById('dish-category').value;
            const description = document.getElementById('dish-description').value.trim();
            const cookingMethod = document.getElementById('dish-cooking-method').value.trim();
            const imagePreview = document.getElementById('image-preview');
            const imageSrc = imagePreview.style.display === 'none' ? 
                `https://picsum.photos/seed/${generateId()}/400/300.jpg` : 
                imagePreview.src;
            
            if (!name || !category || !description) {
                showNotification('请填写所有必填字段', 'error');
                return;
            }
            
            if (AppState.editingDishId) {
                // 编辑现有菜品
                const dishIndex = AppState.dishes.findIndex(d => d.id === AppState.editingDishId);
                if (dishIndex !== -1) {
                    AppState.dishes[dishIndex] = {
                        ...AppState.dishes[dishIndex],
                        name,
                        category,
                        description,
                        cookingMethod,
                        image: imageSrc
                    };
                }
                showNotification('菜品已更新');
            } else {
                // 添加新菜品
                const newDish = {
                    id: generateId(),
                    name,
                    category,
                    description,
                    cookingMethod,
                    image: imageSrc
                };
                
                AppState.dishes.push(newDish);
                showNotification('菜品已添加');
            }
            
            saveDataToStorage();
            renderMenu();
            renderManagement();
            closeDishModal();
        }

        // 编辑菜品
        function editDish(dishId) {
            openDishModal(dishId);
        }

        // 删除菜品
        function deleteDish(dishId) {
            if (confirm('确定要删除这个菜品吗？')) {
                AppState.dishes = AppState.dishes.filter(d => d.id !== dishId);
                
                // 同时从购物车中移除
                AppState.cart = AppState.cart.filter(item => item.id !== dishId);
                
                saveDataToStorage();
                renderMenu();
                renderCart();
                renderManagement();
                showNotification('菜品已删除');
            }
        }

        // 预览图片
        function previewImage(file) {
            if (!file) return;
            
            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.getElementById('image-preview');
                preview.src = e.target.result;
                preview.style.display = 'block';
            };
            reader.readAsDataURL(file);
        }

        // 生成菜单图片
        function generateMenuImage() {
            if (AppState.cart.length === 0) {
                showNotification('购物车是空的，无法生成菜单', 'error');
                return;
            }

            // 创建菜单HTML
            const menuItems = AppState.cart.map(item => {
                const dish = AppState.dishes.find(d => d.id === item.id);
                if (!dish) return '';
                
                return `
                    <div style="display: flex; margin-bottom: 20px; border-bottom: 1px dashed #ccc; padding-bottom: 15px;">
                        <img src="${dish.image}" style="width: 100px; height: 100px; object-fit: cover; margin-right: 15px; border-radius: 5px;">
                        <div style="flex: 1;">
                            <h3 style="margin: 0 0 5px 0; color: #2c3e50;">${dish.name}</h3>
                            <p style="margin: 0 0 5px 0; color: #7f8c8d; font-size: 14px;">${dish.description}</p>
                            <p style="margin: 0; color: #3498db; font-weight: bold;">数量: ${item.quantity}</p>
                        </div>
                    </div>
                `;
            }).join('');

            const menuHtml = `
                <html>
                <head>
                    <title>菜单</title>
                    <meta charset="UTF-8">
                    <style>
                        body {
                            font-family: 'Microsoft YaHei', sans-serif;
                            margin: 0;
                            padding: 20px;
                            background-color: #f8f9fa;
                        }
                        .menu-container {
                            max-width: 600px;
                            margin: 0 auto;
                            background-color: white;
                            padding: 30px;
                            border-radius: 10px;
                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                        }
                        .menu-header {
                            text-align: center;
                            margin-bottom: 30px;
                            border-bottom: 2px solid #3498db;
                            padding-bottom: 15px;
                        }
                        .menu-title {
                            font-size: 28px;
                            color: #2c3e50;
                            margin: 0;
                        }
                        .menu-date {
                            color: #7f8c8d;
                            font-size: 14px;
                            margin-top: 5px;
                        }
                        .menu-footer {
                            text-align: center;
                            margin-top: 30px;
                            color: #7f8c8d;
                            font-size: 12px;
                        }
                    </style>
                </head>
                <body>
                    <div class="menu-container">
                        <div class="menu-header">
                            <h1 class="menu-title">我的菜单</h1>
                            <div class="menu-date">${new Date().toLocaleDateString('zh-CN')}</div>
                        </div>
                        <div class="menu-content">
                            ${menuItems}
                        </div>
                        <div class="menu-footer">
                            <p>感谢您的光临！</p>
                        </div>
                    </div>
                </body>
                </html>
            `;

            // 创建新窗口并打印
            const menuWindow = window.open('', '_blank');
            menuWindow.document.write(menuHtml);
            menuWindow.document.close();
            
            // 等待内容加载完成后触发打印
            menuWindow.onload = function() {
                setTimeout(() => {
                    menuWindow.print();
                }, 500);
            };

            showNotification('菜单已生成，请使用浏览器打印功能保存为图片');
        }

        // 显示通知
        function showNotification(message, type = 'success') {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.style.backgroundColor = type === 'error' ? '#e74c3c' : '#2ecc71';
            notification.classList.add('show');
            
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }

        // 生成唯一ID
        function generateId() {
            return Date.now().toString(36) + Math.random().toString(36).substr(2);
        }
    </script>
</body>
</html>